<template>
    <div class="content">
        <Tips v-show="tipShow" :msg="tipText" />
        <div class="title">
            <p>个人信息</p>
        </div>
        <div class="main">
            <div class="info" v-show="islogin">
                <div class="img">
                    <img src="@/assets/photo.png" alt="">
                    <span>{{userInfo.username}}</span>
                </div>
                <div class="text">
                    <p class="username">
                        用户名：{{userInfo.username}} 
                        <input type="text" v-model="inputUsername" v-show="isShow">
                    </p>
                    <p class="sex">
                        性别：{{userInfo.sex}}
                        <input type="text" v-model="sex" v-show="isShow">      
                    </p>
                    <p class="age">
                        年龄：{{userInfo.age}}
                        <input type="text" v-model="age" v-show="isShow">                   
                    </p>
                    <p claass="emial">
                        邮箱：{{userInfo.emial}}
                        <input type="text" v-model="emial" v-show="isShow">                          
                    </p>
                    <div class="btn">
                        <span class="update" @click="update(userInfo)">修改</span>
                        <span class="yes" v-show="isShow" @click="sendUpdate(userInfo)">确认</span>
                    </div>
                </div>
                
            </div>

            <div class="islogin" v-show="!islogin">
                您还未登陆,登陆后才能查看哦
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Tips from '@/components/Tips'
    export default {
        name:"MyInfo-Component",
        components:{Tips},
        data(){
            return {
                islogin:false,
                username:'',
                inputUsername:"",
                sex:"",
                age:"",
                emial:"",
                isShow:false,
                tipShow:false,
                tipText:""
            }
        },
        computed:{
            ...mapState('About',['userInfo'])
        },
        methods: {
            // 修改数据
            update(userInfo){
                this.isShow = true
                this.inputUsername = userInfo.username
                this.sex = userInfo.sex
                this.age = userInfo.age
                this.emial = userInfo.emial
            },

            // 设置提示框信息   
            tipsChang(msg){
                this.tipShow = true
                this.tipText = msg

                setTimeout(()=>{
                    this.tipShow = false
                    this.tipText = ''
                },1000)
            },
            // 判断后发送请求
            check(userInfo){
                if(this.inputUsername === userInfo.username && this.sex === userInfo.sex && this.age === userInfo.age && this.emial === userInfo.emial){
                    return
                }
                else if(this.inputUsername === '' || this.sex === '' || this.age === '' || this.emial === ''){
                    this.tipsChang('所有信息不可修改为空')
                }
                else{
                    const info = {
                        username:this.inputUsername,
                        sex:this.sex,
                        age:this.age,
                        emial:this.emial
                    }
                    // 设置提示框
                    this.tipsChang('用户信息修改成功,部分数据下次登陆更新！')
                    this.$store.dispatch('About/updateUserInfo',info)
                }

            },
            // 确认修改
            sendUpdate(userInfo){
                this.isShow = false
                
                // 发送请求
                this.check(userInfo)
                // 更新页面
                setTimeout(()=>{
                    this.getUserInfo(this.username)
                },50)
            },

            // 更新浏览器缓存数据


            // 校验是否登陆
            login(){
                const user = sessionStorage.getItem('user')
                if(user){
                    if(JSON.parse(user).username){
                        this.username = JSON.parse(user).username
                    }
                    this.islogin = true
                }
            },

            // 获取用户详细信息
            getUserInfo(username){
                this.$store.dispatch('About/getUserInfo',username)
            },
        },
        created() {
            this.login()
            this.getUserInfo(this.username)
        },
    }
</script>

<style lang="less" scoped>
    .content{
        width: 100%;

        .title{
            font-size: 1.8vw;
            margin-top: 2.6vw;

            p{
                padding-left: 1.3vw;
                margin:0 auto;
                background: #fff;
                width: 90%;
                height:5.2vw;
                line-height: 5.2vw;
            }
        }

        .main{
            margin-top: 2.6vw;

            .info{
                width: 90%;
                margin:0 auto;
                background: #fff;
                height: 32.6vw;
                display: flex;

                .img{
                    height: 100%;
                    display: flex;
                    width: 40%;
                    flex-flow: column;
                    justify-content: center;
                    align-items: center;
                    
                    img{
                        width:120px;
                        height: 120px;
                    }
                    span{
                        font-size: 1.6vw;
                        margin-top: 0.7vw;
                        font-weight: 1000;
                    }
                }

                .text{
                    width: 60%;
                    height: 100%;
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    

                    p{
                        font-size: 1.2vw;
                        margin-bottom: 30px;

                        input{
                            height: 1.2vw;
                        }
                    }
                }

                .btn{
                    margin-top: 3vw;
                    display: flex;
                    
                    span{
                        width: 7vw;
                        text-align: center;
                        height: 2.5vw;
                        line-height: 2.5vw;
                        color: #fff;
                        cursor: pointer;
                    }
                    
                    .update{
                       background: rgb(202, 76, 76);
                       margin-right: 40px;

                       &:hover{
                            background: rgb(158, 33, 33);
                       }
                       
                    }

                    .yes{
                        background: rgb(104, 206, 79);
                        &:hover{
                           background: rgb(38, 121, 17);
                        }
                    }

                }
            }

            .islogin{
                width: 90%;
                margin:0 auto;
                background: #fff;
                height: 32.6vw;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2vw;
                letter-spacing: 0.1vw;
            }
        }
    }
</style>